<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input v-model="listQuery.username" placeholder="评论者" style="width:90px" />
        <el-input v-model="listQuery.sellername" placeholder="店铺名" style="width:180px" />
        <el-input v-model="listQuery.address" placeholder="店铺地址" style="width:180px" />
        <el-button type="primary" icon="el-icon-search" :disabled="isDisable" @click="search">搜索</el-button>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="tableData"
          element-loading-text="拼命加载中"
          border
          fit
          highlight-current-row
          style="width: 100%"
          :row-style="{height:'0px'}"
          :cell-style="{padding:'0px'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="username" label="评论者" />
          <el-table-column prop="sellername" label="店铺名" />
          <el-table-column width="300px" prop="address" label="店铺地址" />
          <el-table-column width="280px" prop="content" label="评论内容" :show-overflow-tooltip="true" />
          <el-table-column label="分数" align="center" width="180px">
            <template slot-scope="scope">
              <el-rate v-model="scope.row.star" :colors="colors" show-score text-color="#ff9900" disabled />
            </template>
          </el-table-column>
          <el-table-column prop="time" width="160px" label="评论时间" :formatter="dateFormat" />
        </el-table>
        <div class="page">
          <el-pagination
            v-if="total"
            background
            :current-page="listQuery.pn"
            :page-sizes="[10, 20, 25, 30]"
            :page-size="listQuery.ps"
            layout="total, slot, sizes, prev, pager, next, jumper"
            :total="totalNumber"
            @current-change="pageChange"
            @size-change="sizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getComment,
  findComment
} from '@/api/sellermanage/comment'
import moment from 'moment'

export default {
  name: 'Basetable',
  filters: {
    timeFilter(time) {
      var date = time
      if (date === undefined) {
        return ''
      }
      if (date === null) {
        return ''
      }
      if (date === '') {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      confirmDelAllVisible: false,
      isDisable: false, // 是否禁用搜索按钮
      tableData: [{
        id: 1,
        username: '张sir',
        sellername: '正宗黄焖鸡米饭',
        address: '四川省成都市西航港街道学府路一段24号',
        content: '好吃好！！！',
        star: 2.9,
        time: 1600331031937
      }],
      // 查询条件：
      listQuery: {
        pn: 1, // 当前页数 int
        ps: 10, // 每页大小 int
        username: '',
        sellername: '',
        address: ''
        // sort: '+id'
      },
      total: undefined, // 总页数
      totalNumber: undefined // 总条数
    }
  },
  created() {
    this.listLoading = false
    this.getList()
    // // console.log('checkPhone--->' + this.checkPhone('123fvsd'))
  },
  methods: {
    // 分页：
    pageChange(num) {
      this.listQuery.pn = num
      this.getList()
    },
    sizeChange(num) {
      this.listQuery.ps = num
      // this.paginationData.currentPage == 1 && this.requestListData()
      // 每一页改变当前显示条数需要重新请求数据
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.tableData = []
      var params = new URLSearchParams()
      params.append('ps', this.listQuery.ps)
      params.append('pn', this.listQuery.pn)
      // var seller_id = sessionStorage.getItem("seller_id")
      params.append('id', 1)
      getComment(params).then(res => {
        this.total = res.CommentList.totalPage
        this.totalNumber = res.CommentList.totalCount
        if (res.CommentList.list !== null && res.CommentList.list.length !== 0) {
          this.tableData = res.CommentList.list
          this.listLoading = false
        } else {
          this.tableData = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
    },

    FindList() {
      this.listLoading = true
      this.tableData = []
      var params = new URLSearchParams()
      params.append('ps', this.listQuery.ps)
      params.append('pn', this.listQuery.pn)
      params.append('username', this.listQuery.username)
      params.append('sellername', this.listQuery.sellername)
      params.append('address', this.listQuery.address)
      // var seller_id = sessionStorage.getItem("seller_id")
      params.append('sellerId', 1)
      findComment(params).then(res => {
        this.total = res.CommentList.totalPage
        this.totalNumber = res.CommentList.totalCount
        if (res.CommentList.list !== null && res.CommentList.list.length !== 0) {
          this.tableData = res.CommentList.list
          this.listLoading = false
        } else {
          this.tableData = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
    },

    search() {
      this.isDisable = true
      this.tableData = []
      this.FindList()
      setTimeout(() => {
        this.isDisable = false // 点击一次时隔两秒后才能再次点击
      }, 2000)
    },
    // 时间戳转时间：
    dateFormat(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      if (date === null) {
        return ''
      }
      if (date === '') {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style scoped>
  .image {
    /* height: 70px; */
    width: 100%;
    display: block;
  }

  .fontStyle {
    font-size: 18px;
    color: #6b6c6e;
    font-family: '楷体';
  }

  .starStyle {
    font-size: 18px;
    margin-top: 10px;
  }

  .page {
    margin-top: 1%;
    margin-bottom: 2%;
    float: right;
  }

  .container {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
  }

  .handle-box {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 120px;
    display: inline-block;
  }

  .del-dialog-cnt {
    font-size: 16px;
    text-align: center
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .green {
    color: #228B22;
  }

  .mr10 {
    margin-right: 10px;
  }

  .formStyle {
    margin-left: -10%;
    margin-right: 5%;
  }
</style>
